<template>
  <div class="app-container">
    <div class="grid-content bg-purple">
      <!--查询表单-->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item size="mini">
          <el-input v-model="CourseOverviewQuery.courseName" placeholder="课程名称" @change="getCourseOverviewList(0)"/>
        </el-form-item>
        <el-form-item size="mini">
          <el-input v-model="CourseOverviewQuery.courseCode" placeholder="课程代码" @change="getCourseOverviewList(0)"/>
        </el-form-item>

        <el-button type="primary" icon="el-icon-search" @click="getCourseOverviewList()" size="mini">搜索</el-button>
        <el-button type="default" icon="el-icon-refresh" @click="resetQueryData()" size="mini">重置</el-button>
      </el-form>
<!--导入导出按钮-->
<!--      <div class="buttonClass">-->
<!--        <el-button-->
<!--          type="success"-->
<!--          plain-->
<!--          icon="el-icon-upload2"-->
<!--          size="mini"-->
<!--          @click="handleImport"-->
<!--        >导入-->
<!--        </el-button>-->

<!--        <el-button-->
<!--          type="warning"-->
<!--          plain-->
<!--          icon="el-icon-download"-->
<!--          size="mini"-->
<!--          @click="handleExport"-->
<!--        >导出-->
<!--        </el-button>-->
<!--      </div>-->

      <!--课程列表 -->
      <el-table
        :data="courseOverviewList"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        style="width: 100%;margin-bottom: 20px;"
        border fit highlight-current-row>

        <el-table-column prop="courseCode" label="课程代码" width="150px"/>

        <el-table-column prop="courseName" label="课程名称"/>

        <el-table-column prop="categoryNum" label="目录数"/>

        <!-- 操作栏 -->
        <el-table-column label="操作" width="250" align="center">
          <template slot-scope="scope">
            <el-button type="button" class="el-button el-button--text" @click="gotoCategory(scope.row.courseId)">
              <i class="el-icon-view"></i>
              <span>查看详情</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        background
        layout="prev, pager, next"
        style="padding: 30px 0; text-align: center;"
        @current-change="getCourseOverviewList"/>
    </div>

  </div>
</template>
<script>
  import category from '@/api/management/category'
  import course from '@/api/management/course'
  import Sortable from 'sortablejs'

  export default {
    data() {
      return {
        page: 1,
        limit: 10,
        total: 0,
        // 组合目录查询条件
        CourseOverviewQuery: {
          courseId: '',
          courseName: '',
          courseCode: '',
          categoryNum: ''
        },
        // 目录概略列表
        courseOverviewList: []
      }
    },
    created() {
      this.getCourseOverviewList()
    },
    methods: {
      // 跳转到目录页面
      gotoCategory(courseId) {
        this.$router.push(`/categoryDetail/${courseId}`)
      },
      // 查询目录列表
      getCourseOverviewList(page = 1) {
        this.page = page
        category.getCourseOverview(this.page, this.limit, this.CourseOverviewQuery)
          .then(response => {
            this.courseOverviewList = response.data.courseOverviewList
            this.total = response.data.total
          })
      },
      // 重置搜索条件
      resetQueryData() {
        //清空查询条件
        this.CourseOverviewQuery = {}
        // 重新查询所有数据
        this.getCourseOverviewList()
      },
      // 导入Excel
      handleImport() {

      },
      // 导出Excel
      handleExport() {

      }
    }
  }
</script>
<style>
  .buttonClass {
    padding-bottom: 20px;
  }

  .noBorder {
    border: 0;
  }

  .el-tag {
    margin-right: 10px;
  }

  /*.el-tooltip__popper.is-dark {*/
  /*  !*font-size: 8px;*!*/
  /*  background: rgba(0, 0, 0, .4);*/
  /*}*/
</style>
